<template>
    <div class="title">
        <div class="TLeft">
            <img :src="selectTitle.imgUrl"/>
        </div>
        <div class="TRight">
            <div class="TH">
                <span class="Tfont">歌单</span>
                <span class="Tbiaoti"> {{selectTitle.title}}</span>
            </div>
            <div class="TInfomation">
                <div class="TPicture"><img :src="selectTitle.authorImg"/></div>
                <div class="Twenzi">
                <span class="TName">{{selectTitle.authorName}}</span>
                <span class="TS2">{{selectTitle.creationTime}}</span>
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="Tbiaoqian">
                <span class="TS1">标签：</span>
                <span class="TB" v-for="item in tag" :key="item.id">{{item.tagName}}</span>
                <!--<span class="TBline">/</span>-->
                <!--<span class="TB">流行</span><span class="TBline">/</span>-->
                <!--<span class="TB">孤独</span>-->
            </div>
            <div class="Tjianjie">
                <span class="TS1" style="display: block;float: left">简介：</span>
                <span id="btn1" class="TS2" style="display: block;float: left;height: 20px;transition: 0.5s all;" v-html="this.selectTitle.intro">{{selectTitle.intro}}</span>


                <!--<input  type="button" value="显示全文" @click="show()"/>-->
                <div style="clear: both"></div>
            </div>
            <div id="arrowhead" @click="arrow()">
                <img id="pic1" class="ArrowPic" src="../assets/ArrowheadTop.png"  @click="show()"/>
                <img id="pic2" class="ArrowPic" src="../assets/ArrowheadBottom.png" style="display: none" @click="show()"/>
            </div>
            <div style="clear: both"></div>
        </div>
        <div style="clear: both"></div>
    </div>
</template>

<script>
    import vuex from 'vuex'

    export default {
        name: "ContentTitle",
        data(){
            return{
                selectTitle:'',
                tag:[],
                music:[],
            }
        },
        activated(){
            // 初始化方法
            this.init()
            this.getSelectTitle()
        },
        created () {
            this.getSelectTitle()
        },

        methods:{
            // 初始化方法
            init () {
                this.selectTitle = '';
                this.tag = '';
            },

            getSelectTitle(){
                let id = this.$route.params.id;
                this.$http({
                    url:this.$http.adornUrl("/special/selectById"),
                    method:'get',
                    params: this.$http.adornParams({
                        id : id
                    })
                }).then(({data})=>{
                    console.log(data)


                    this.selectTitle = data.entity
                    this.tag = data.tagList
                    this.music = data.musicList

                    var lastestValue = this.music;
                    this.$store.commit("increment",lastestValue)

                    // 切换时间格式
                    const time = this.selectTitle.creationTime;
                    var date = new Date(time);

                    function getTime(n){
                        if(n>10){
                            return n;
                        }else{
                            return '0'+n;
                        }

                    }
                    var strTime = '';
                    strTime += date.getFullYear() + "-" ;
                    strTime += getTime(date.getMonth()+1) + "-";
                    strTime += getTime(date.getDate());
                    this.selectTitle.creationTime = strTime;
                    // 获取后台的换行
                    var content = this.selectTitle.intro.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
                    this.selectTitle.intro=content;

                })
            },
            //箭头的显示与隐藏
            arrow(){
                var oPic1 =document.getElementById('pic1');
                var oPic2 =document.getElementById('pic2');
                var oArrowhead = document.getElementById('arrowhead');
                if(oPic2.style.display==='none'){
                    oPic1.style.display='none';
                    oPic2.style.display='block';
                }else{
                    oPic1.style.display='block';
                    oPic2.style.display='none';
                }

            },
            // 高度显示隐藏
            show(){
                var oBt =document.getElementById('btn1');

                if(oBt.style.height==='20px'){
                     oBt.style.height='initial';

                }else{
                    oBt.style.height='20px';

                }
            },



        },




    }
</script>

<style scoped>
    .title{
        width: 90%;
        /*height: 300px;*/
        background-color:black;
        float: right;
        margin-top: 100px;
    }
    .TLeft{
        width: 20%;
        height: 260px;
        float: left;
        margin-top: 20px;
    }
    .TLeft img{
        width: 75%;
        height: 230px;

    }
    .TRight{
        width: 60%;
        /*height: 280px;*/
        float: left;
        margin-top: 25px;


    }
    .TH{
        height: 50px;
        width: 70%;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .Tfont{
        border: 2px solid red;
        color: red;
        font-weight: bold;
        margin-top: 10px;
        margin-right: 10px;
    }
    .Tbiaoti{
        color:white;
        font-size: 27px;
        font-weight: bold;

    }
    .TRight h1{
        margin: initial;
        color:orange;

    }

    .Tjianjie{
        /*height: 50px;*/
        width: 70%;
        text-align: left;
    }
    .TS1{
        color: white;
    }
    .TS2{
        color: rgb(130,131,133);

        width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;

    }
    .Tbiaoqian{
        height: 50px;
        width: 70%;
        text-align: left;
    }
    .Tbiaoqian .TB{
        margin-right: 12px;
        color:#5d6165;
        width: 55px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background-color: #e0d4d4;
        border-radius: 50px;
        display: inline-block;
        /*inline-block: 既有inline的同行特性，又有block的宽度和高度特性。*/

    }
    .Tbiaoqian .TBline{
        color: magenta;
    }
    .TInfomation{
        height: 70px;
        width: 70%;
        text-align: left;
        line-height: 50px;
    }
    .TInfomation img{
        width: 50px;
        height:50px;
        border-radius: 50%;
    }
    .TInfomation .TName{
        color: white;
        margin: 0px 20px;
    }
    .TPicture{
        float: left;
    }
    .Twenzi{
        float: left;
    }
    #arrowhead{
        text-align: initial;
        margin-left: 160px;
    }
    .ArrowPic{
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }
</style>